// 令牌生成组件
const TokenGenerator = {
    template: `
        <div class="token-container form-container">
            <div class="form-header">
                <h2 class="form-title">
                    <i class="fas fa-key"></i> 生成访问令牌
                </h2>
                <p>生成用于访问APISIX API的JWT令牌</p>
            </div>
            
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" v-loading="loading">
                <el-form-item label="应用ID" prop="appId">
                    <el-select 
                        v-model="form.appId" 
                        filterable 
                        placeholder="请选择应用ID"
                        style="width: 100%">
                        <el-option
                            v-for="consumer in consumers"
                            :key="consumer.appId"
                            :label="consumer.appName ? (consumer.appName + ' (' + consumer.appId + ')') : consumer.appId"
                            :value="consumer.appId">
                        </el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="有效期" prop="expireTime">
                    <el-select v-model="form.expireTime" placeholder="请选择令牌有效期">
                        <el-option label="1小时" :value="3600"></el-option>
                        <el-option label="1天" :value="86400"></el-option>
                        <el-option label="7天" :value="604800"></el-option>
                        <el-option label="30天" :value="2592000"></el-option>
                        <el-option label="永久" :value="-1"></el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item>
                    <el-button type="primary" @click="generateToken">生成令牌</el-button>
                </el-form-item>
            </el-form>
            
            <div v-if="token" class="token-result">
                <h3>生成的令牌</h3>
                <p>请妥善保管此令牌，它将用于API访问验证</p>
                <div class="token-value">{{ token }}</div>
                <div style="margin-top: 15px;">
                    <el-button size="small" type="primary" @click="copyToken">
                        <i class="fas fa-copy"></i> 复制令牌
                    </el-button>
                    <el-button size="small" @click="token = ''">
                        <i class="fas fa-times"></i> 清除
                    </el-button>
                </div>
            </div>
        </div>
    `,
    data() {
        return {
            form: {
                appId: '',
                expireTime: 3600
            },
            rules: {
                appId: [
                    { required: true, message: '请选择应用ID', trigger: 'change' }
                ],
                expireTime: [
                    { required: true, message: '请选择令牌有效期', trigger: 'change' }
                ]
            },
            consumers: [],
            token: '',
            loading: false
        };
    },
    created() {
        this.fetchConsumers();
        
        // 如果URL中有appId参数，自动填充
        if (this.$route.query.appId) {
            this.form.appId = this.$route.query.appId;
        }
    },
    methods: {
        fetchConsumers() {
            this.loading = true;
            axios.get('/consumers')
                .then(response => {
                    this.consumers = response.data;
                })
                .catch(error => {
                    console.error('获取消费者列表失败:', error);
                    this.$message.error('获取消费者列表失败');
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        generateToken() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.loading = true;
                    
                    // 获取当前时间戳（秒）
                    const timestamp = Math.floor(Date.now() / 1000);
                    
                    axios.post('/token', {
                        appId: this.form.appId,
                        expireTime: this.form.expireTime,
                        timestamp: timestamp
                    })
                    .then(response => {
                        this.token = response.data.token;
                    })
                    .catch(error => {
                        console.error('生成令牌失败:', error);
                        this.$message.error('生成令牌失败: ' + (error.response && error.response.data && error.response.data.error ? error.response.data.error : '未知错误'));
                    })
                    .finally(() => {
                        this.loading = false;
                    });
                }
            });
        },
        copyToken() {
            const textarea = document.createElement('textarea');
            textarea.value = this.token;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            this.$message({
                message: '已复制到剪贴板',
                type: 'success'
            });
        }
    }
}; 